<template>
  <div class="other_page">
    <div class="other_main">
      <img src="~@/assets/images/page/other_img.png" alt="" class="other_img">
      <div class="other_list">
        <div class="other_li" v-for="(item,index) in menuList" :key="index">
          <img :src="item.url" alt="" class="other_li_img" :style="{ animationDelay: (index * 0.3) + 's' }">
          <div class="other_li_text">{{item.text}}</div>
        </div>
      </div>
      <img src="~@/assets/images/page/other_text.png" alt="" class="other_text_img">
      <div class="other_text">
        AS LONG AS YOU TRY OUR PRODUCT, YOU WILL NOTICE THE FOLLOWING DIFFERENCES BETWEEN US AND OTHER PRODUCTS.
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      menuList:[
        {
          url:require('@/assets/images/page/other_1.png'),
          text:'SmokeFree'
        },
        {
          url:require('@/assets/images/page/other_2.png'),
          text:'Less toxicants'
        },
        {
          url:require('@/assets/images/page/other_3.png'),
          text:'High Quality Ingredients'
        },
        {
          url:require('@/assets/images/page/other_4.png'),
          text:'Unique Flavour'
        },
        {
          url:require('@/assets/images/page/other_5.png'),
          text:'Long Lasting Enjoyment'
        }
      ]
    }
  },
  created(){

  },
  methods:{}
}
</script>
<style lang="scss" scoped>
.other_page{
  width: 100%;
  height:634px;
  background: url('~@/assets/images/page/other_bg.png') no-repeat;
  background-size: 100% 121px;
  background-position: left top;
  position: relative;
  padding-top: 121px;
  box-sizing: border-box;
  .other_main{
    height: 513px;
    width: 100%;
    
    padding-left:28px;
    box-sizing: border-box;
    position: relative;
    .other_img{
      width: 401px;
      height: 361px;
      cursor: pointer;
      animation: bounce 1.5s ease-in-out infinite;
      &:hover {
        transform: scale(1.05);
      }
    }
    .other_text{
      width: 120px;
      position: absolute;
      top: 57px;
      right: 30px;
      color: #000000;
      font-size: 9px;
      font-weight: bold;
    }
    
    .other_list{
      width: 178px;
      height: 344px;
      background:#FFE46F ;
      padding: 13px 19px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      right: 0;
      .other_li{
        height: 65px;
        display: flex;
        align-items: center;
        border-bottom:1px dashed #B8A550;
        cursor: pointer;
        &:last-child{
          border:none;
        }
        &:hover{
          transform: scale(1.1);
        }
        .other_li_img{
          margin-right: 13px;
          width: 18px;
          height: 18px;
          animation: li-bounce 1.5s ease-in-out infinite;
        }
        .other_li_text{
          color: #000000;
          font-size: 12px;
          font-weight: bold;
        }
      }
    }
    .other_text_img{
      width: 173px;
      height: 90px;
      margin-top: 14px;
    }
    
  }
}
@keyframes bounce {
  0% { transform: scale(1.05) translateY(0); }
  50% { transform: scale(1.05) translateY(-5px); }
  100% { transform: scale(1.05) translateY(0); }
}
@keyframes li-bounce {
  0% { transform: scale(1); }
  20% { transform: scale(1.2); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}
</style>